<template>
	<view class="meal" @click="goDishesDetails">
		<view class="icons" v-if="showRanking">
			<image v-if="index == 0" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/1.png" mode="">
			</image>
			<image v-else-if="index == 1" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/2.png" mode="">
			</image>
			<image v-else-if="index == 2" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/3.png" mode="">
			</image>
		</view>
		<view class="" style="text-align: center;">
			<view class="" style=" width: 190rpx;margin-left: 50%;transform: translateX(-50%);">
				<!-- 	<view class="" style="width: 190rpx;height: 190rpx;">
					<image v-if="item.coverImage && item.coverImage.length > 10" class="img_b" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"
						:src="JSON.parse(item.coverImage)[0].url" mode="aspectFill"></image>
				</view> -->
				<view class="combo flex_between" style="justify-content: space-around">
					<view class="txt f18" style=""> 
						{{item.comboName}}套餐
					</view>
					<!-- <view class="describe f18">
						总销量:{{item.saleAllNum < 0 ? 0 : item.saleAllNum}}
					</view> -->
					<!-- <u-cell
					        title="单元格"
					        value="内容"
					        label="描述信息"
					        center
					    ></u-cell> -->
				</view>
				<view class="f18" v-for="v in item.foodNames">
					{{v}}
				</view>
			</view>
		</view>
		<!-- 	<view class="" v-if="item.comboId">
			<view class="" style="width: 190rpx;height: 190rpx;">
				<image class="img_b" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"
					:src="JSON.parse(item.coverImage)[0].url" mode="aspectFill"></image>
			</view>
			<view class="combo flex_between" style="">
				<view class="txt">
					{{item.comboName}}
				</view>
				<view class="describe">
					销量:{{item.sales}}
				</view>
			</view>
		</view>
		<view v-else-if="item.foodId" class="">
			<view class="" style="width: 190rpx;height: 190rpx;">
				<image class="img_b" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"
					:src="JSON.parse(item.image)[0].url" mode="aspectFill">
				</image>
			</view>

			<view class="combo flex_between" style="">
				<view class="txt">
					{{item.foodName}}
				</view>
				<view class="describe">
					销量:{{item.sales}}
				</view>
			</view>
		</view> -->
		<uni-popup ref="comboPopup" type="bottom" class="">
			<comboDetailsView ref="comboDetailsView" v-if="comboId" @closePopup="closePopup" :comboId="comboId"
				:showShopping="false" />
		</uni-popup>
	</view>
</template>

<script>
	import {
		listData,
	} from "@/api/system/dict/data"
	import comboDetailsView from '@/components/common/comboDetailsView.vue'
	export default {
		components: {
			comboDetailsView
		},
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			index: {
				type: Number,
				default: null
			},
			showRanking: {
				type: Boolean,
				default: true
			},
			availablePreview: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				comboId: '',
				tableColumn: [],
				tableCuisine: []
			}
		},
		created() {
			this.dictdata()
		},
		methods: {
			async dictdata() {
				const res = await listData({
					dictType: "combo_column",
					pageSize: 99,
					pageNum: 1
				})

				const data = await listData({
					dictType: "cuisine_column",
					pageSize: 99,
					pageNum: 1
				})
				console.log(res)

				const T = JSON.parse(JSON.stringify(res.rows));
				const S = JSON.parse(JSON.stringify(data.rows));
				this.tableColumn = T;
				this.tableCuisine = S;
			},
			closePopup() {
				// console.log('closePopup');
				this.$refs.comboPopup.close()
				this.comboId = null
			},
			goDishesDetails() {
				console.log('同事常点菜品点击了', this.item)
				if (!this.availablePreview) return
				const tableColumn = this.tableColumn.filter(item => item.dictValue == 1)
				const tableCuisine = this.tableColumn.filter(item => item.dictValue == 1)
				this.comboId = this.item.id
				this.$nextTick(() => {
					console.log('打印', this.$refs.comboDetailsView)
					this.$refs.comboDetailsView.getComboDetail()
					this.$refs.comboDetailsView.tableColumn = tableColumn
					this.$refs.comboDetailsView.tableCuisine = tableCuisine
					this.$refs.comboPopup.open()
				})
				// 暂时注释 后续需要再调整
				// if (this.item.type == "dish") {
				// 	// 菜品
				// 	this.$tab.navigateTo(
				// 		`/pages/reserve/dishesDetails?id=${this.item.id}`
				// 	)
				// } else if (this.item.type == "combo") {
				// 	const tableColumn = this.tableColumn.filter(item => item.dictValue == 1)
				// 	const tableCuisine = this.tableColumn.filter(item => item.dictValue == 1)
				// 	this.comboId = this.item.id
				// 	this.$nextTick(() => {
				// 		console.log('打印', this.$refs.comboDetailsView)
				// 		this.$refs.comboDetailsView.getComboDetail()
				// 		this.$refs.comboDetailsView.tableColumn = tableColumn
				// 		this.$refs.comboDetailsView.tableCuisine = tableCuisine
				// 		this.$refs.comboPopup.open()
				// 	})
				// 	// 套餐
				// 	// this.$emit('comboDetails', this.item)
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.meal {
		position: relative;

		.icons {
			position: absolute;
			left: 4rpx;
			top: 0;
			z-index: 9;
			width: 40rpx;
			height: 48rpx;
		}

		.img_b {}

		.combo {
			margin-top: 8rpx;

			.txt {
				font-size: 26rpx;
			}
		}

		.describe {
			margin-top: 4rpx;
			font-size: 26rpx;
			/* 次要 */
			// color: #848484;
		}
	}
</style>